<template>
  <div class="w" style="padding-bottom: 100px;">
    <mall-shelf title="XPay收银台 收款方: Exrick">
      <div slot="content">
        <div class="box-inner order-info">
          <p class="payment-detail">扫一扫付款（元）</p>
          <p class="payment-money">{{ orderTotal }}</p>
          <p v-if="custom" class="payment-detail" style="margin-bottom:10px">
            支付时请在备注中输入您的订单标识号：
            <span class="payNum">{{ payNum }}</span>
          </p>
          <div class="img-box">
            <img id="qr" :src="imgPath" alt="加载失败" class="pic" width="168px" height="168px">
            <div class="explain">
              <img class="fn-left" src="https://t.alipayobjects.com/images/T1bdtfXfdiXXXXXXXX.png" alt="扫一扫标识">
              <div class="fn-right">打开手机支付宝<br>扫一扫继续付款</div>
              <div v-if="timeout" class="timeout">二维码已过期</div>
            </div>
          </div>
          <a class="download-alipay" href="https://mobile.alipay.com/index.htm" target="_blank">首次使用请下载手机支付宝</a>
          <div class="count">{{ timecount }}</div>

          <div v-if="!custom" class="qrguide-area">
            <img src="https://t.alipayobjects.com/images/rmsweb/T13CpgXf8mXXXXXXXX.png" :class="show?'show-img':'close-img'" @click="changePic()">
            <img src="https://t.alipayobjects.com/images/rmsweb/T1ASFgXdtnXXXXXXXX.png" :class="show?'close-img':'show-img'" @click="changePic()">
          </div>

          <img src="/images/red.png" width="50px" height="50px" class="red" title="支付领红包" @click="showRed()">
        </div>

        <div>
          <div class="box-btn">
            <div>
              <span />
              <em><span>¥</span>{{ orderTotal }}</em>
              <mall-button :text="payNow" :class-style="submit?'main-btn':'disabled-btn'" style="width: 120px;height: 40px;font-size: 16px;line-height: 38px" @btnClick="paySuc()" />
            </div>
          </div>
        </div>

      </div>
    </mall-shelf>

    <el-dialog :visible.sync="dialogVisible" style="text-align:center;margin:0 auto" title="支付红包" @close="handleClose">
      <img src="/images/alipay-red.jpg" class="qr-red">
      <span>支付前领个红包吧(每日可领一次)</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">领取了</el-button>
      </span>
    </el-dialog>

    <el-dialog :visible.sync="customVisible" title="请在备注中输入支付标识号" style="text-align:center;margin:0 auto" @close="handleCloseCus">
      支付时请在备注中输入您的订单标识号：<span class="payNum">{{ payNum }}</span><br>
      若忘记输入或输入错误可能会造成您支付失败！
      <img src="/images/aliremark.png" width="350px" class="display: block;margin: 0 auto;">
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="customVisible = false">知道了</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import MallShelf from '@/components/MallShelf'
import MallButton from '@/components/MallButton'
import StorageUtils from '@/utils/StorageUtils'

export default {
  components: {
    MallShelf,
    MallButton
  },
  data() {
    return {
      show: true,
      count: 25,
      userId: '',
      orderTotal: '',
      userName: '',
      tel: '',
      streetName: '',
      checkPrice: '',
      payNow: '等待支付...',
      submit: false,
      nickName: '',
      money: '',
      info: '',
      email: '',
      dialogVisible: true,
      isCustom: 0,
      imgPath: 'static/qr/alipay/custom.png',
      picName: '',
      timeout: false,
      timecount: '',
      customVisible: false,
      payNum: '',
      custom: false
    }
  },
  computed: {
  },
  mounted() {
    const price = StorageUtils.get('price')
    const isCustom = StorageUtils.get('isCustom')
    const payNum = StorageUtils.get('payNum')
    this.orderTotal = this.toMoney(price)
    if (this.orderTotal === 'NaN') {
      this.$router.push({ path: '/' })
    }
    if (isCustom !== 'true') {
      this.custom = false
      this.picName = this.orderTotal
      this.imgPath = 'static/qr/alipay/' + this.picName + '/' + payNum + '.png'
    } else {
      this.custom = true
      this.payNum = payNum
    }
  },
  methods: {
    changePic() {
      this.show = !this.show
    },
    toMoney(num) {
      num = parseFloat(num)
      num = num.toFixed(2)
      num = num.toLocaleString()
      return num
    },
    handleClose() {
      if (!this.custom) {
        this.countDown()
        this.countTime()
      } else {
        this.customVisible = true
      }
    },
    handleCloseCus() {
      this.countDown()
      this.countTime()
    },
    showRed() {
      this.dialogVisible = true
    },
    countDown() {
      const me = this
      if (this.count === 0) {
        this.payNow = '确认已支付'
        this.submit = true
        return
      } else {
        this.count--
      }
      setTimeout(() => {
        me.countDown()
      }, 1000)
    },
    countTime() {
      const me = this
      let time = StorageUtils.get('setTime')
      if (time <= 0) {
        this.timeout = true
        this.timecount = ''
        this.count = 10000
        return
      } else {
        time--
        this.showTime(time)
        StorageUtils.set('setTime', time)
      }
      setTimeout(() => {
        me.countTime()
      }, 1000)
    },
    showTime(v) {
      let m = 0
      let s = 0
      if (v === null || v === '') {
        return ''
      }
      if (v >= 60) {
        m = Math.floor(v / 60)
        s = v % 60
      } else {
        s = v
      }
      if (m >= 0 && m <= 9) {
        m = '0' + m
      }
      if (s >= 0 && s <= 9) {
        s = '0' + s
      }
      this.timecount = '请于 ' + m + ' 分 ' + s + ' 秒 内支付'
    },
    paySuc() {
      this.$router.push({ path: '/order/paysuccess', query: { price: this.orderTotal }})
    }
  }
}
</script>

<style lang="scss" scoped rel="stylesheet/scss">
.w {
  padding-top: 39px;
}

.order-info {
  padding: 60px 0 55px;
  color: #333;
  background: #fff !important;
  h3 {
    padding-bottom: 14px;
    line-height: 36px;
    text-align: center;
    font-size: 36px;
    color: #212121;
  }
  .payment-detail {
    text-align: center;
    line-height: 24px;
    font-size: 14px;
    color: #999;
  }
}

.box-inner {
  line-height: 60px;
  background: #f9f9f9;
  border-top: 1px solid #e5e5e5;
  box-sizing: border-box;
  > div {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 0 20px;
  }
  em {
    margin-left: 5px;
    font-size: 24px;
    color: #d44d44;
    font-weight: 700;
    margin-right: 20px;
    span {
      margin-right: 4px;
      font-size: 16px;
    }
  }
}

.box-btn {
  line-height: 60px;
  background: #f9f9f9;
  border-top: 1px solid #e5e5e5;
  box-sizing: border-box;
  > div {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 20px;
  }
  em {
    margin-left: 5px;
    font-size: 24px;
    color: #d44d44;
    font-weight: 700;
    margin-right: 20px;
    span {
      margin-right: 4px;
      font-size: 16px;
    }
  }
}

.payment-money {
  text-align: center;
  font-size: 30px;
  color: #d44d44;
  font-weight: 700;
}

.img-box{
  position: relative;
  width: 180px;
  height: auto;
  min-height: 168px;
  margin: 0 auto;
  padding: 6px;
  border: 1px solid #d3d3d3;
  box-shadow: 1px 1px 1px #ccc;
  display: inline-block;
}

.explain {
  margin: 5px 0 12px 0;
}

.pic{
  margin-top: 3px;
}

.fn-left{
  margin-left: -5px;
}

.fn-right{
  font-size: 13px;
  color: #4D4D4D;
  line-height: 18px;
  margin: -57px 0 0 33px;
}

.download-alipay {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  margin-top: -5px;
  font-size: 12px;
  color: #a6a6a6;
  text-decoration: underline;
  width: 25%;
  margin: 0 auto;
}

.qrguide-area {
  position: absolute;
  top: 113px;
  left: 713px;
  width: 204px;
  height: 183px;
  cursor: pointer;
}

.show-img{
  display: block;
}

.close-img{
  display: none;
}

.red {
  position: absolute;
  top: 482px;
  left: 1151px;
  width: 47px;
  height: 50px;
  cursor: pointer;
}

.el-dialog--small {
  width: 30%;
}

.qr-red {
  display: block;
  margin: 0 auto;
  width: 250px;
}

.count {
  display: flex;
  position: absolute;
  text-align: center;
  width: 230px;
  flex-direction: column;
  align-items: center;
  margin-left: calc(50% - 115px);
  margin-top: 0px;
  color: #222;
  margin-top: -18px;
}

.timeout{
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(255,255,255,.95);
  color: #222;
  line-height: 200px;
  text-align: center;
  z-index: 1;
}

.payNum {
  color: #d44d44;
  font-weight: 700;
  font-size: 18px;
}
</style>
